<template>
	<view class="record-container">
		<view class="" style="z-index: 1000; position: fixed; top: 0; left: 0; right: 0;">
			<view class="" v-show="targetsData.length>1"
				style="display: flex; justify-content: center; align-items: center; height: 30px; background-color: #F2F2F0;">
				<text>左右滑动切换不同指标页面</text>
			</view>
			<view class=""
				style="display: flex; justify-content: center; align-items: center; background-color: #fff; height: 35px;">
				<text
					style="margin-left: 5px; display: inline-block; display: flex; justify-content: center; align-items: center; height: 30px; width: 30px; border-radius: 50%;"
					v-for=" (item,index1) in targetsData.length" :key="index1"
					:style="index1 === index ? 'background-color: #3288DF;': 'background-color: #CCCCCC;'">
					{{index1+1}}</text>
			</view>
		</view>
		<view class="" style="background-color: #fff;" :style="{height: (targetsData.length> 1? '60px': '30px') }">

		</view>
		<swiper class="record-swiper" :current="index" :indicator-dots="false" :autoplay="false" :duration="500">
			<swiper-item v-for="target in targetsData">
				<wyb-slide-listener @slideLeft="onSlide" @slideRight="onSlide">
					<view class="first">
						<view class="title-box">
							<view class="title title-height">
								<text class="pl-12">指标名称</text>
							</view>
							<view class="content" style="height: auto;">
								<text class="pl-12">{{target.name}}</text>
							</view>
						</view>
						<view class="des-box">
							<view class="des title-height">
								<text class="pl-12">指标说明</text>
							</view>
							<view class="content" style="display: flex;flex-wrap: wrap;flex-direction: row;">
								<text class="pl-12">{{target.content}}</text>

								<u-link v-if="target.file_name"
									style="align-self: flex-end;justify-content: flex-end;margin-right: 5px;"
									:href="`http://192.168.0.234:8080${target.file_url}`" :text="target.file_name"
									:under-line="true"></u-link>
							</view>
						</view>
					</view>

					<view class="two">
						<view class="content">
							<text>评价人：{{target.comment.userName}}</text>
						</view>
						<view class="content">
							<text>评价小组：{{target.comment.groupName}}</text>
						</view>
						<view class="content">
							<text>评价结果：{{isNull(target.choiceType) ? target.comment.input_value: target.comment.options_value }}</text>
						</view>
						<view class="text-area-box">
							<text>工作亮点</text>
							<u--textarea v-model="target.comment.light" disabled></u--textarea>
						</view>
						<view class="text-area-box">
							<text>存在问题</text>
							<u--textarea v-model="target.comment.content" disabled></u--textarea>
						</view>
						<view class="text-area-box">
							<text>工作建议</text>
							<u--textarea v-model="target.comment.opinions" disabled></u--textarea>
						</view>
					</view>
				</wyb-slide-listener>
			</swiper-item>
		</swiper>
		<view class="media">
			<u-cell-group>
				<u-cell isLink icon="file-text-fill" title="实证资料" @click="viewFile">
					<u-badge slot="value" :showZero="true" :value="fileNum"></u-badge>
				</u-cell>
			</u-cell-group>
		</view>
	</view>

</template>

<script>
	import {
		groupCommentList
	} from "@/api/supervise/index.js"
	import {
		isNotNull,
		isNull
	} from "@/utils/common.js"
	import wybSlideListener from '@/components/wyb-slide-listener/wyb-slide-listener.vue'
	export default {
		data() {
			return {
				queryData: {},
				targetsData: [],
				commentsData: [],
				index: 0,
				fileNum: 0,
				isNull,
				editable: false
			}
		},
		onLoad(option) {
			if (Object.keys(option).length > 0) {
				const queryData = JSON.parse(decodeURIComponent(option.queryData));
				this.queryData = queryData;
				uni.setNavigationBarTitle({
					title: queryData.name
				});
				this.groupCommentList();
			}
			this.changeNaBtnTitle();
		},
		onNavigationBarButtonTap(e) {
			// 点击导航栏自定义按钮
			this.toEdit();
		},
		methods: {
			toEdit() {
				if (this.editable === 1) {
					this.$u.toast("该指标不可编辑");
					return;
				}
				this.$tab.redirectTo("/pages/work/supervisionGroupRecord/target-update?queryData=" + encodeURIComponent(
					JSON.stringify(this.queryData)));
			},
			changeNaBtnTitle() {
				const pages = getCurrentPages();
				const page = pages[pages.length - 1];
				const currentWebview = page.$getAppWebview();
				const tn = currentWebview.getStyle().titleNView;
				const isGroup = this.queryData.isGroup
				if (this.editable === 1) {
					tn.buttons[0].width = 0;
					currentWebview.setStyle({
						titleNView: tn
					});
				} else {
					currentWebview.setStyle({
						titleNView: tn
					});
				}
			},
			getFileNum() {
				let num = 0;
				const comment = this.commentsData[this.index]
				num += comment.imgUrls.length;
				num += comment.voiceUrls.length;
				num += comment.videoUrls.length;
				this.fileNum = num;
			},
			onSlide: function(e) {
				let type = e.type
				switch (type) {
					case 'slideLeft':
						if (this.index < this.targetsData.length - 1) {
							this.index++;
							this.getFileNum();
						}
						break
					case 'slideRight':
						if (this.index > 0) {
							this.index--;
							this.getFileNum();
						}
						break
				}
			},
			groupCommentList() {
				const params = {
					targetId: this.queryData.targetId,
					activityId: this.queryData.activityId,
					schoolId: this.queryData.schoolId

				};
				groupCommentList(params).then(res => {
					console.log(res)
					const targets = res.targets;
					const comments = res.comments;
					targets.forEach(target => {
						if (comments.length > 0) {
							comments.forEach(comment => {
								if (target.id === comment.targetId) {
									target["comment"] = comment;
								}
							})
						} else {
							target["comment"] = {
								userName: "无",
								groupName: "无",
								options_value: "无",
								light: "无",
								content: "无",
								opinions: "无",
							}
						}
					});
					this.targetsData = targets;
					this.commentsData = comments;
					this.commentsData.forEach(item => {
						item["imgUrls"] = isNotNull(item.imgUrl) ? item.imgUrl.split(",") : [];
						item["voiceUrls"] = isNotNull(item.voiceUrl) ? item.voiceUrl.split(",") : [];
						item["videoUrls"] = isNotNull(item.videoUrl) ? item.videoUrl.split(",") : [];
					})
					this.editable = res.editable;
					this.getFileNum()
					this.changeNaBtnTitle()
				});
			},
			viewFile() {
				if (this.fileNum == 0) {
					this.$u.toast("暂无实证资料");
					return;
				}
				const comment = this.commentsData[this.index];
				const fileUrls = {
					imgUrls: comment.imgUrls,
					voiceUrls: comment.voiceUrls,
					videoUrls: comment.videoUrls,
				}
				this.$tab.navigateTo("/pages/empirical-file/empirical-file?fileUrls=" + encodeURIComponent(JSON
					.stringify(fileUrls)));
			}

		},
	}
</script>

<style lang="scss" scoped>
	page {
		position: relative;
	}

	.record-container {
		font-size: 20px;

		.record-swiper {
			height: 120vh;
		}

		.two {
			padding: 20px 12px 10px;

			.text-area-box {
				margin: 20px 0;
			}
		}

		.title-height {
			height: 7vh;
			line-height: 7vh;
			background-color: #F2F2F0;
		}

		.content {
			display: flex;
			align-items: center;
			background-color: #fff;
			height: auto;
			padding: 12px 12px;
		}

		.pl-12 {
			padding-left: 12px;
		}


		.media {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			height: 3vh;
			display: flex;
			background-color: #fff;
		}
	}
</style>